<template>
  <div style="width: 100%; height: 400px">
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
// import {
//   getDeviceModelCount
// } from '@/api/datacenter'

export default {
  mixins: [resize],
  props: {

  },
  data() {
    return {
      data: [
        { value: 1048, name: 'ANDROID' },
        { value: 735, name: 'LINUX' },
        { value: 580, name: 'OTHER' }
      ],
      chart: null,
      emptyVisible: false
    }
  },
  mounted() {
    // var config = { 'dateUnit': 'day', 'dateRange': 7 }

    // this.$nextTick(() => {
    //   this.initData(config)
    // })
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initData(config) {
      // console.log('这里再请求数据', config)
      // getDeviceModelCount(config).then((res) => {
      //   this.data = res
      //   if (this.data != null && this.data.length > 0) { this.initChart() } else {
      //     this.emptyVisible = true
      //   }
      // })
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              normal: {
                padding: [0, -30, 0, -30], // 调整左右位置,
                formatter: '{b}: {d}%',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: { 
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 10,
              normal: {
                color: function(params) {
                  var colorList = [
                    '#2C7BE5',
                    '#A6C5F7',
                    '#D2DDEC'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            },
            data: this.data

          }
        ]
      }

      this.chart.setOption(option, true)
    }
  }
}
</script>

<style>
</style>
